import React, { useState, useEffect } from 'react';
import { CalendarOutlined, FundOutlined, FileTextOutlined } from '@ant-design/icons';
import { BookOutlined, FileFilled } from '@ant-design/icons';
import { Row, Col, Card, Select, TreeSelect, } from 'antd';

import { queryAreaTree } from '@/services/area';
import { Link,useRequest } from 'umi';
import { getDeviceTatol} from '@/services/device';
import styles from './index.less';
import { queryEnergyAnalysisenergyNum } from '@/services/energyAnalysis';

import type1Img from '@/assets/dtype_bianpinqi.png';
import type2Img from '@/assets/dtype_mabao.png';
import type3Img from '@/assets/dtype_wendu.png';
import type4Img from '@/assets/dtype_zhinengyibiao.png';

import device1Img from '@/assets/warningDevice.png';
import deviceImg from '@/assets/normalDevice.png';
import moment from 'moment';
import { numberConversion } from '@/utils/utils';

const { Meta } = Card;

const overview: React.FC = (props) => {

  

  const [areaTreeData, setAreaTreeData] = useState<API.TreeNodeItem[]>([]);
  const [areaId, setAreaId] = useState<number>();
  const [energyNum, setenergyNum] = useState([]);
  const {data:allCount} = useRequest(() =>  getDeviceTatol({areaId})
  , {
    refreshDeps: [areaId]
  });


  useEffect(() => {
    const setSelectData = async () => {
      let trees = await queryAreaTree();
      setAreaTreeData(trees);
      queryEnergyAnalysisenergyNum({deviceId:80000115 }).then(function(energyNum){
        energyNum.dayPercentage = getPercentage(energyNum.today_num || 0, energyNum.yestoday_num || 0);
        energyNum.dayDifference = energyNum.today_num || 0 - energyNum.yestoday_num || 0;
        energyNum.dayDifference =
          ((energyNum.dayDifference || 0) > 0 ? '+' : '') + numberConversion(energyNum.dayDifference || 0);
        energyNum.monthPercentage = getPercentage(
          energyNum.current_mouth_num || 0,
          energyNum.last_mouth_num || 0,
        );
        energyNum.monthDifference = energyNum.current_mouth_num || 0 - energyNum.last_mouth_num || 0;
        energyNum.monthDifference =
          ((energyNum.monthDifference || 0) > 0 ? '+' : '') +  numberConversion(energyNum.monthDifference || 0);
        energyNum.yearPercentage = getPercentage(
          energyNum.this_year_num || 0,
          energyNum.last_year_num || 0,
        );
        energyNum.yearDifference = energyNum.this_year_num || 0 - energyNum.last_year_num || 0;
        energyNum.yearDifference =
          ((energyNum.yearDifference || 0) > 0 ? '+' : '') +  numberConversion(energyNum.yearDifference || 0);
    
        setenergyNum(energyNum);
    })
  
    };
    setSelectData();
  }, []);


  const getPercentage = (num1, num2) => {
    if (num1 == 0 && num2 == 0) {
      return '--';
    }
    var percentage = '+--';
    // num2= num2==0?1:num2;
    if (num2 == 0) {
      num2 = 1;
      num1++;
      percentage =  '+100%';
    }else{
      percentage = ((num1 - num2) / num2) * 100;
      percentage = percentage.toFixed(2);
      percentage = (num1 > num2 ? '+' : '') + percentage + '%';
    }


    return percentage;
  };
  return (
    <div className={styles.main}>
        <Row style={{alignItems:'center',margin:'0 0 20px'}}>
         设备区域 <TreeSelect  onChange={(e)=> setAreaId(e)}
            style={{ width: '260px',marginLeft:'10px' }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={areaTreeData} placeholder="请选择所在区域"  treeDefaultExpandAll />
       </Row>
      <Row gutter={[16, 16]}>
        <Col span={14} >
         
          <Card  className={ styles.modalItem} title={<div><CalendarOutlined />&nbsp;概况</div>} style={{ height: 400 }}
           >
            <Link to={'/device/list/'} >
              <Row style={{ width: '100%', height: '120px', padding: '16px 15px 0' }}>
                <Col span={16} style={{ fontSize: '18px', textAlign: 'center', padding: '40px 0', backgroundColor: '#365fb9' }}>设备总数</Col>
                <Col span={8} style={{ fontSize: '18px', textAlign: 'center', padding: '40px 0', backgroundColor: '#4377dd' }} >{allCount?.deviceCount?.all_count||"0"}</Col>
              </Row>
            </Link>
         
              <Row gutter={[32, 32]} style={{ padding: '32px 15px 0' }}>
              
                <Col span={8}>
                  <Link  to={'/device/list/1'}  >
                    <Card
                      style={{ width: '100%'}}
                      cover={<div style={{textAlign: 'center',backgroundColor: '#2e58ae',padding:'20px 0 5px' }}><img alt="example" src={type1Img} height='50px' width='60px' /><p style={{marginTop:'16px'}}>变频器</p></div> }
                    >
                      <Meta  style={{  backgroundColor: '#4377dd'}} title={allCount?.deviceCount?.type1_count||"0"}/>
                    </Card>
                  </Link>
                </Col>
                <Col span={8}>
                  <Link    to={'/device/list/2'}  >
                    <Card
                    style={{ width: '100%'}}
                    cover={<div style={{textAlign: 'center',backgroundColor: '#2e58ae',padding:'20px 0 5px' }}><img alt="example" src={type2Img} height='50px' width='60px' /><p style={{marginTop:'16px'}}>马达保护器</p></div> }
                    >
                    <Meta style={{  backgroundColor: '#4377dd'}}  title={allCount?.deviceCount?.type2_count||"0"}/>
                  </Card>
                  </Link>
                </Col>
                {/* <Col span={6}>
                  <Link   to={'/device/list/3'} >
                    <Card
                    style={{ width: '100%'}}
                    cover={<div style={{textAlign: 'center',backgroundColor: '#2e58ae',padding:'20px 0 5px' }}><img alt="example" src={type3Img} height='50px' width='60px' /><p style={{marginTop:'16px'}}>电流表</p></div> }
                    >
                    <Meta  style={{  backgroundColor: '#4377dd'}} title={allCount?.deviceCount?.type3_count||"0"}/>
                  </Card>
                  </Link>
                </Col> */}
               
              
                <Col span={8}>  
                  <Link   to={'/device/list/3'} ><Card
                    style={{ width: '100%' }}
                    cover={<div style={{textAlign: 'center',backgroundColor: '#2e58ae',padding:'20px 0 5px' }}><img alt="example" src={type4Img} height='50px' width='60px' /><p style={{marginTop:'16px'}}>电能表</p></div> }
                    >
                    <Meta style={{  backgroundColor: '#4377dd'}}  title={allCount?.deviceCount?.type3_count||"0"}/>
                  </Card></Link>
                </Col>
              </Row>
          </Card>

          <Card  className={ styles.modalItem} title={<div><FundOutlined />&nbsp;运行状态</div>} style={{ height: 335,marginTop:'16px' }} >
            <div   style={{ padding:'0 15px' }}>
              <Row className={styles.twotitle}> 更新时间 {moment().format("YYYY-MM-DD HH:mm:ss")} </Row>
              <Row gutter={[32, 32]} style={{ paddingTop: '32px' }}>
                <Col span={6}>
                  <Link to={'/monitoring/realtime/800'} >
                    <Card
                      style={{ width: '100%',  }}
                      cover={<div ><div className={styles.block1}></div><div style={{textAlign: 'center',backgroundColor: '#2e58ae',padding:'20px 0 5px' }}><img alt="example" src={deviceImg} height='50px' width='60px' /><p style={{marginTop:'16px'}}>{allCount?.deviceCount?.all_count-(allCount?.runstateCount[0]?.value||0)-(allCount?.runstateCount[1]?.value||0)-(allCount?.runstateCount[2]?.value||0)} </p></div> </div>}
                    >
                      <Meta style={{  backgroundColor: '#4377dd'}} title={"正常设备"}/>
                    </Card>
                  </Link>
                </Col>
                {allCount?.runstateCount.map((item,index) => (
                <Col span={6}>
                  <Link to={`/monitoring/realtime/${item.level}`} >
                    <Card
                    style={{ width: '100%'}}
                    cover={<div ><div className={index==0?styles.block2:index==1?styles.block3:styles.block4}></div><div style={{textAlign: 'center',backgroundColor: '#2e58ae',padding:'20px 0 5px' }}><img alt="example" src={device1Img} height='50px' width='60px' /><p style={{marginTop:'16px'}}>{item.value}</p></div></div> }
                    >
                    <Meta  style={{  backgroundColor: '#4377dd'}} title={item.name}/>
                    </Card>
                  </Link>
                </Col>
                ))}
              
      
                {/* <Col span={6}>
                <Link to={'/monitoring/realtime'} >
                    <Card
                    style={{ width: '100%'}}
                    cover={<div ><div className={styles.block3}></div><div style={{textAlign: 'center',backgroundColor: '#2e58ae',padding:'20px 0 5px' }}><img alt="example" src={device2Img} height='50px' width='60px' /><p style={{marginTop:'16px'}}>{allCount?.runstateCount?.alarm_num}</p></div></div> }
                    >
                    <Meta  style={{  backgroundColor: '#4377dd'}} title={"报警设备"}/>
                  </Card>
                 </Link>
                </Col>
                <Col span={6}>
                  <Link to={'/monitoring/realtime'} >
                    <Card
                    style={{ width: '100%' }}
                    cover={<div ><div className={styles.block4}></div><div style={{textAlign: 'center',backgroundColor: '#2e58ae',padding:'20px 0 5px' }}><img alt="example" src={device3Img} height='50px' width='60px' /><p style={{marginTop:'16px'}}>{allCount?.runstateCount?.fault_num}</p></div></div> }
                    >
                    <Meta style={{  backgroundColor: '#4377dd'}} title={"故障设备"}/>
                    </Card>
                  </Link>
                </Col> */}


              </Row> 
            </div>
           
          </Card>
        </Col>
       
        <Col span={9} >
          <Row  gutter={[0, 16]}>
            <Col span={24}  className={ styles.modalItem}>
              <Card title={<div><BookOutlined />&nbsp;报警记录</div>} style={{ height: 195 }}>
                <Row gutter={[16, 0]}   style={{ padding:'0 15px' }}>
                {allCount?.todayAlarmTypeCount.map((item,index) => (
                  <Col span={8}>
                    <Link    to={'/alarm/record/80'+(index+1)}  >
                      <Card
                        style={{ width: '100%', backgroundColor: '#4377dd' }}
                        cover={<div className={  [styles.alarmCover, index==0?styles.block2:index==1?styles.block3:styles.block4].join(' ') }>{item.name||"低低报警"}</div>}
                      >
                        <Meta  title={(item.value||"0")+"/"+(allCount?.alarmTypeCount?.[index].value||"0")} />
                      </Card>
                    </Link>
                  </Col>
                ))}
                  {/* <Col span={8}>
                    <Link  to={'/alarm/record/602'}    >
                      <Card
                        style={{ width: '100%', backgroundColor: '#4377dd' }}
                        cover={<div style={{ height: '80px', backgroundColor: '#f4b766', fontSize: '18px', textAlign: 'center', padding: '30px 0' }}>
                          {allCount?.todayAlarmTypeCount?.[1].name||"中报警"}</div>}
                      >
           
                        <Meta  title={(allCount?.todayAlarmTypeCount?.[1].value||"0")+"/"+(allCount?.alarmTypeCount?.[1].value||"0")} />
                      </Card>
                    </Link>
                  </Col>
                  <Col span={8}>
                    <Link   to={'/alarm/record/601'}  >
                      <Card 
                        style={{ width: '100%', backgroundColor: '#4377dd' }}
                        cover={<div style={{ height: '80px', backgroundColor: '#fd6864', fontSize: '18px', textAlign: 'center', padding: '30px 0' }}>{allCount?.todayAlarmTypeCount?.[0].name||"高高报警"}</div>}
                      >
                        <Meta  title={(allCount?.todayAlarmTypeCount?.[0].value||"0")+"/"+(allCount?.alarmTypeCount?.[0].value||"0")} />
                      </Card>
                    </Link>
                  </Col> */}
                 
                </Row>
              </Card>
            </Col>
            {allCount?.patrolRecord?  
              <Col span={24}  className={ styles.modalItem}>
                <Card title={<div><FileFilled />&nbsp;近期巡检记录</div>} style={{ height: 184 }}>
                  <Link to={'/mochaITOM/patrolRecord'} >
                    <Row   style={{ padding:'0 15px' }}>
                      <Col span={18}>
                        <div style={{fontSize: '15px', margin: '6px 0'}}>巡检时间：{allCount?.patrolRecord?.patrol_time}</div>
                        <div style={{fontSize: '15px', margin: '6px 0'}}>巡检项数：{allCount?.patrolRecord?.patrol_item_num}项</div>
                        <div style={{fontSize: '15px', margin: '6px 0'}}>缺陷项：{allCount?.patrolRecord?.defect_num}项</div>
                        <div style={{fontSize: '15px', margin: '6px 0'}}>巡检人员：{allCount?.patrolRecord?.real_name}</div>
                      </Col>
                      <Col span={6}>
                      </Col>
                    </Row>
                  </Link>
                </Card>
              </Col>
             :null} 

            <Col span={24}  className={styles.modalItem}>
            <Card title={<div><FileFilled />&nbsp;能耗概况</div>} style={{ height: 333 }}>
              <Row gutter={[8, 8]} style={{margin:'8px'}} >
                  <Col span={8} >
                    <div className={styles.huanbiitem}>
                    <p className={styles.number}>{numberConversion(energyNum.today_num|| 0) }</p>
                    <p className={styles.bt}>今日(kw.h)</p>
                    </div>
                  </Col>
                  <Col span={8} >
                    <div className={styles.huanbiitem}>
                    <p className={styles.number}>{numberConversion(energyNum.yestoday_num || 0)}</p>
                    <p className={styles.bt}>昨日(kw.h)</p>
                    </div>
                  </Col>
                  <Col span={8} >
                    <div className={styles.huanbiitem}>
                      <div className={styles.qushiTop}>
                        <p>{energyNum.dayPercentage}</p>
                        <p className={styles.down}>{energyNum.dayDifference}</p>
                      </div>
                      <p className={styles.bt}>趋势</p>
                    </div>
                  </Col>
                </Row>
                <Row  gutter={[8, 8]}  style={{margin:'8px'}}>
                <Col span={8} >
                    <div className={styles.huanbiitem}>
                    <p className={styles.number}>{numberConversion(energyNum.current_mouth_num || 0)}</p>
                    <p className={styles.bt}>当月(kw.h)</p>
                    </div>
                  </Col>
                  <Col span={8} >
                    <div className={styles.huanbiitem}>
                    <p className={styles.number}>{numberConversion(energyNum.last_mouth_num || 0)}</p>
                    <p className={styles.bt}>上月(kw.h)</p>
                    </div>
                  </Col>
                  <Col span={8} >
                    <div className={styles.huanbiitem}>
                      <div className={styles.qushiTop}>
                        <p>{energyNum.monthPercentage}</p>
                        <p className={styles.down}>{energyNum.monthDifference}</p>
                      </div>
                      <p className={styles.bt}>趋势</p>
                    </div>
                  </Col>
                </Row>
                <Row  gutter={[8, 8]}  style={{margin:'8px'}}>
                <Col span={8} >
                    <div className={styles.huanbiitem}>
                      <p className={styles.number}>{numberConversion(energyNum.this_year_num || 0)}</p>
                      <p className={styles.bt}>今年(kw.h)</p>
                    </div>
                  </Col>
                  <Col span={8} >
                    <div className={styles.huanbiitem}>
                      <p className={styles.number}>{numberConversion(energyNum.last_year_num || 0)}</p>
                      <p className={styles.bt}>去年(kw.h)</p>
                    </div>
                  </Col>
                  <Col span={8} >
                    <div className={styles.huanbiitem}>
                      <div className={styles.qushiTop}>
                        <p>{energyNum.yearPercentage}</p>
                        <p className={styles.down}>{energyNum.yearDifference}</p>
                      </div>
                      <p className={styles.bt}>趋势</p>
                    </div>
                  </Col>
                </Row>
              
            </Card>
        </Col>
          </Row>
        </Col>
      
      
      </Row>
    </div>
  );
};

export default overview;